<template>
  <!-- 
    demo: <zl-icon ></zl-icon>
   -->
  <div style="display: inline-block">
    <div class="flex-wrap flex-center-wrap">
      <svg
        class="svg-icon"
        :style="iconStyle"
        aria-hidden="true"
        :class="classNameObj"
        @click="emitClick"
      >
        <use :xlink:href="iconName"></use>
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  name: 'zlIcon',
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    },
    iconStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    icon: {
      type: String,
      default: ''
    },
    className: {
      type: String,
      default: ''
    }
  },
  // 数据
  data() {
    return {}
  },
  // 计算属性
  computed: {
    iconName() {
      if (!this.icon) {
        return ''
      }
      if (this.icon.indexOf('#') > -1) {
        return this.icon
      }
      return `#${this.icon}`
    },
    classNameObj() {
      let o = {}
      if (this.className) {
        let key = this.className
        o[key] = true
      }
      return o
    }
  },
  methods: {
    emitClick() {
      this.$emit('on-click', this.rowData)
    }
  }
}
</script>
<!--当前页面的样式 -->
<style scoped></style>
